<template>
  <div class="withdraw">
    <div class="topBox">
      <p>可提现余额(元)</p>
      <div class="moneyBox">
        <span class="price">0.00</span>
        <span>
          <el-button type="primary">提现</el-button>
        </span>
      </div>
      <p class="money_extra">注：此账户用于本平台知识助手账户收款产生的相关收益。订单入账时，微信将收取每笔0.6%的交易手续费，由本平台完成代缴。</p>
    </div>
    <div class="searchArea">
      <div class="table-title">提现记录</div>
      <div class="search-filtrate">
        <el-date-picker
          v-model="keyTime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width:400px"
        />
        <el-select v-model="keyStatus" placeholder="请选择">
          <el-option
            v-for="item in keyStatusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-button type="primary">搜索</el-button>
      </div>
    </div>
    <div class="tableBox">
      <el-table
      :data="billTableData"
      :header-cell-style="{background:'#fafbfc',color:'#606266'}"
      border
      style="width: 100%">
      <el-table-column prop="time" label="申请时间" align="center" />
      <el-table-column prop="accountee" label="到帐账户" align="center" />
      <el-table-column prop="accountType" label="账户类型" align="center" />
      <el-table-column prop="extractMoney" label="提现金额（元）" align="center" />
      <el-table-column prop="status" label="状态" align="center"/>
      <el-table-column prop="remark" label="备注" align="center"/>
      <el-table-column prop="operator" label="操作人" align="center"/>
      <el-table-column prop="runningTab" label="交易流水" align="center"/>
    </el-table>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      keyTime: '',
      keyStatus: '',
      billTableData: [
        {
          time: '2019-03-06',
          accountee: '6313132151312511',
          accountType: '银行卡',
          extractMoney: '500',
          status: '可提取',
          remark: '备注提取',
          operator: '路亚',
          runningTab: '20190706000032'
        }
      ],
      keyStatusOptions: [
        {
          value: 'all',
          label: '全部状态'
        },
        {
          value: 'waitAudit',
          label: '待审核'
        },
        {
          value: 'waitRemit',
          label: '待打款'
        },
        {
          value: 'extractError',
          label: '提现失败'
        },
        {
          value: 'extractSuccess',
          label: '提现成功'
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.withdraw {
  // padding: 0 20px;
  .topBox {
    background-color: #fafbfc;
    padding: 20px;
    .moneyBox {
      display: flex;
      align-items: center;
      .price {
        display: inline-block;
        font-size: 30px;
        font-weight: 600;
        margin-right: 40px;
      }
    }
    .money_extra {
      font-size: 10px;
      line-height: 20px;
      color: #a9a9a9;
    }
  }
  .searchArea {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0 24px;
    margin: 20px 0;
    padding: 0 20px;
    .table-title {
      font-size: 16px;
      font-weight: 500;
      color: #353535;
      line-height: 22px;
    }
    .search-filtrate {
      margin-left: auto;
    }
  }
  .tableBox {
    padding: 0 20px;
  }
}
</style>
